HTML - tags - thead tag

revision:


Content

thead" tag " groups header content in a table syntax some examples


"thead" tag " groups header content in a table

top

The <thead> tag is used to group header content in an HTML table. It is used in conjunction with the "tbody> and "tfoot" elements to specify each part of a table (header, body, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The "thead" element must have one or more "tr" tags inside. The "thead" tag must be used in the following context: as a child of a "table" element, after any "caption" and "colgroup" elements, and before any "tbody", "tfoot", and "tr" elements. The "thead", "tbody", and "tfoot" elements will not affect the layout of the table by default.
However, you can use CSS to style these elements!

Attributes: the <thead> element supports the global attributes and events attributes.


Syntax

top

<thead> . . . </thead>


some examples

top
Month Savings
January $100
January $80
Sum $180
Codes:
                  <style>
                      thead {color:green;}
                      tbody {color:blue;}
                      tfoot {color:red;}
                      table, th, td {border: 1px solid black;margin-left:4vw;}
                  </style>
                  <table>
                      <thead>
                          <tr>
                            <th>Month</th>
                            <th>Savings</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                            <td>January</td>
                            <td>$100</td>
                          </tr>
                          <tr>
                            <td>January</td>
                            <td>$80</td>
                          </tr>
                      </tbody>
                      <tfoot>
                          <tr>
                          <td>Sum</td>
                            <td>$180</td>
                          </tr>
                      </tfoot>
                  </table>
              
The Three Most Popular JavaScript Libraries
Library jQuery Bootstrap Modernizr
Market Share 96.1% 17.0% 14.3%
Absolute Usage 70.4% 12.4% 10.5%
Market Share refers to the percentage of sites using any JavaScript library that use the specified library. Absolute Usage is the percent of websites surveyed, including those that use no JavaScript libraries, that use the specified library.
Codes:
                  <table>
                      <caption>The Three Most Popular JavaScript Libraries</caption>
                      <thead>
                            <tr>
                                <th>Library</th> 
                                <th>jQuery</th> 
                                <th>Bootstrap</th> 
                                <th>Modernizr</th> 
                              </tr> 
                      </thead> 
                      <tbody> 
                              <tr> 
                                  <td>Market Share</td>
                                  <td>96.1%</td>
                                  <td>17.0%</td> 
                                  <td>14.3%</td> 
                              </tr> 
                              <tr> 
                                  <td>Absolute Usage</td> 
                                  <td>70.4%</td> 
                                  <td>12.4%</td> 
                                  <td>10.5%</td> 
                              </tr> 
                      </tbody> 
                      <tfoot> 
                              <tr> 
                                  <td colspan="4"><em>Market Share</em> refers to the percentage of sites 
                                  using any JavaScript library that use the specified library. <em>Absolute 
                                  Usage</em> is the percent of websites surveyed, including those that use 
                                  no JavaScript libraries, that use the specified library. </td> 
                              </tr> 
                      </tfoot>
                  </table>